<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterPage.xhtml">

	<ui:define name="pageHeader">
		<div>
			<h1>Changelog</h1>
		</div>
	</ui:define>

	<ui:define name="content">

		<h:form id="changelog_form">


			<p:dataTable id="changelog" var="rev"
				value="#{changelogBean.dbRevisions}" paginator="true" rows="10"
				paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
				rowsPerPageTemplate="10,20,30" styleClass="tables text"
				emptyMessage="Load revisions...">

				<f:facet name="header">
					<p:toolbar>

						<p:toolbarGroup align="left">
							<p:commandButton
								actionListener="#{changelogBean.loadRevisionFromDB()}"
								update="changelog" icon="ui-icon-refresh" title="Refresh" />
						</p:toolbarGroup>

						<p:toolbarGroup align="right" styleClass="text">
							<h:outputText value="Actual state: " />
							<h:outputText value="${changelogBean.actualState}" />
						</p:toolbarGroup>


					</p:toolbar>

				</f:facet>

				<p:ajax event="rowToggle"
					listener="#{changelogBean.loadFilesAndTweets}"
					update="revFiles,tweets" />

				<p:column style="width:2%">
					<p:rowToggler />
				</p:column>


				<p:column>
					<f:facet name="header">  
                    Revision  
            		</f:facet>
					<h:outputText value="#{rev.revisionNo}" />
				</p:column>

				<p:column>
					<f:facet name="header">  
                    Author  
            		</f:facet>
					<h:outputText value="#{rev.author}" />
				</p:column>


				<p:column>
					<f:facet name="header">  
                    Comment  
           			 </f:facet>
					<h:outputText value="#{rev.comment}" style="text-align: left" />
				</p:column>

				<p:rowExpansion id="changes">
					<p:panelGrid columns="2">
						<p:column style="width:50%">
							<div class="changeDetails">
								<p:dataTable id="revFiles" var="file"
									emptyMessage="Load files..." value="#{changelogBean.files}"
									selection="#{changelogBean.selectedFile}"
									selectionMode="single" rowKey="#{file.key.name}" rows="10"
									paginator="true"
									paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
									paginatorPosition="bottom" styleClass="expandeTables"
									liveResize="true">

									<p:ajax event="rowSelect"
										update=":dialog:cont,:dialog:fileName,:dialog:selectMenu"
										listener="#{fileContentBean.clearContentDT}"
										onstart="PF('fileDialog').show()" />

									<f:facet name="header">
							Actions
							</f:facet>

									<p:column>
										<f:facet name="header">
							Changed File
							</f:facet>
										<h:outputText value="#{file.key.name}" />
									</p:column>

									<p:column>
										<f:facet name="header">
							Action
							</f:facet>
										<h:outputText value="#{file.value}" />
									</p:column>

								</p:dataTable>
							</div>
						</p:column>
						<p:column style="width:50%">
							<div class="tweetTable">
								<p:dataTable id="tweets" var="tweet" value="#{tweetBean.tweets}"
									emptyMessage="No tweets for revision." scrollable="true"
									styleClass="expandeTables">


									<f:facet name="header">
								Tweets
							</f:facet>

									<p:column style="width: 20%">
										<f:facet name="header">
							Author
							</f:facet>
										<h:outputText value="#{tweet.author}" />
									</p:column>

									<p:column>
										<f:facet name="header">
							Tweet
							</f:facet>
										<p:inputTextarea value="#{tweet.tweet}"
											style="text-align: left!important; width: 90%;  height: 40px"
											maxlength="140" autoResize="true" readonly="true" rows="140" />
									</p:column>

									<f:facet name="footer">
										<p:panelGrid columns="1" style="text-align: left">
											<p:inputTextarea id="inputTweet" requiredMessage="true"
												maxlength="140" style="width: 90%; height: 40px"
												title="Your tweet here" value="${tweetBean.tweetMessage}" />


											<p:commandButton ajax="true"
												actionListener="${tweetBean.saveTweet(rev)}" value="Send"
												update="tweets,inputTweet" oncomplete="sendNotif()" />

											<p:remoteCommand name="sendNotif"
												actionListener="#{tweetBean.sendTweetNotification()}">
											</p:remoteCommand>
										</p:panelGrid>


									</f:facet>

								</p:dataTable>
							</div>
						</p:column>

					</p:panelGrid>


				</p:rowExpansion>

			</p:dataTable>



			<p:remoteCommand name="revload"
				actionListener="#{changelogBean.loadRevisionFromDB()}"
				autoRun="true" update="changelog">

			</p:remoteCommand>

		</h:form>

		<ui:insert name="file_content">
			<ui:include src="/templates/file_content.xhtml" />
		</ui:insert>

		<ui:insert name="feedback">
			<ui:include src="/templates/feedback.xhtml" />
		</ui:insert>

	</ui:define>

	<ui:define name="footer">
		<div />
	</ui:define>
</ui:composition>